<template>
	<div class="home">
		<van-row>
			<van-col span="24">
				<van-image width="100%" :src="require('@/assets/images/banner-index.jpg')" />
			</van-col>
		</van-row>
		<div class="mid-box">
			<div class="mid-div">
				<ul class="ul">
					<li @click="tab(1)" :class="{ active: num == 1}">健康出行</li>
					<li @click="tab(2)" :class="{ active: num == 2}">疫情地图</li>
				</ul>
				<div class="tab-box">
					<div v-show="num==1">
						<ul class="code-ul">
							<li @click="tab(3)" :class="{ selected: nums == 1}">核酸码</li>
							<li @click="tab(4)" :class="{ selected: nums == 2}">健康码</li>
						</ul>
						<div class="code-hesuan" v-show="nums==1">
							<van-row>
								<van-col span="24" class="date-box">{{dataTime | updatetime}}</van-col>
								<div v-for="item in checkList">
									<van-col span="24" class="jiance">核酸检测时间: {{item.happenTime}}</van-col>
									<van-col span="24" class="jiance">检测机构: {{item.orgName}}</van-col>
									<van-col span="24" class="jiance">检测结果: {{item.result}}</van-col>
								</div>
								<van-col span="24">
									<van-image v-if="qrCode" style="margin-top: 15px;" width="240" :src="qrCode" />
									<span v-else style="height: 140px; display: inline-block;padding-top: 100px;">
										未按照济宁市最新疫情防控要求完成规定的核酸检测，无法领取蓝码
									</span>
								</van-col>
								<van-col span="24" class="code-name">{{userInfo.name | updateName}}</van-col>
								<van-col span="24" class="code-card">{{userInfo.idCard | updateCard}}</van-col>

							</van-row>
						</div>
						<div class="code-health" v-show="nums==2">
							<van-row>
								<van-col span="24" class="date-box">{{dataTime | updatetime}}</van-col>
								<van-col span="24" class="date-tit">健康状态核验
									<span class="code-green">未见异常 (绿码)</span>
								</van-col>
								<van-col span="24">
									<van-image style="margin-top: 15px;" width="220"
										:src="require('@/assets/images/health-img.jpg')" />
								</van-col>
								<van-col span="24" class="jiezhong">
									已接种新冠疫苗
								</van-col>
								<van-col span="24" class="code-name">{{userInfo.name | updateName}}</van-col>
								<van-col span="24" class="code-card">{{userInfo.idCard | updateCard}}</van-col>
							</van-row>
						</div>
					</div>
					<div v-show="num==2" class="map-box">
						<van-row type="flex" justify="space-between" align="cneter" class="map-title">
							<van-col span="18">截止{{dataMapTime}}</van-col>
							<van-col span="6">数据来源</van-col>
						</van-row>
						<van-row>
							<van-col span="24">
								<map-area></map-area>
							</van-col>
						</van-row>

					</div>
				</div>
			</div>
		</div>
		<!--10个按钮-->
		<van-row type="flex" class="btn-bj">
			<!-- :src="require('@/assets/images/ali-banner.png')" -->
			<van-col :style="`background: url(${item.url}) no-repeat center`" span="12" @click="clickBtn(item)"
				v-for="(item, i) in btnList" :key="i">
				{{item.value}}
			</van-col>
		</van-row>
	</div>
</template>
<script>
	import moment from 'moment'
	import mapArea from './components/map.vue'
	import {
		encrypt
	} from '@/utils/jsencrypt.js'
	import {
		createsign,
		gateway,
		qrHScode
	} from '@/api/index'
	import axios from 'axios'
	import qs from 'qs'
	import global from '@/utils/common'; //引用模块进来
	import {
		EncryptCert,
		EncryptName
	} from '@/utils/common'; //引用模块进来
	import {
		Toast
	} from 'vant'

	export default {
		name: 'home',
		components: {
			mapArea
		},
		data() {
			return {
				btnList: global.btnList,
				checkList: [], //核酸检测信息
				qrCode: "", //核酸码
				num: 1,
				nums: 1,
				dataTime: new Date(),
				dataMapTime: this.$moment().format("YYYY年MM月DD日HH:mm:ss"),
				timer: null,
				sign: null,
				userInfo: {
					name: "郝雪君",
					idCard: "230281199311062368"
				},
			}
		},
		filters: {
			updatetime: function(value) {
				return moment(value).format("YYYY年MM月DD日 HH:mm:ss")
			},
			// 加密身份证号
			updateCard: function(value) {
				return EncryptCert(value)
			},
			// 加密名字
			updateName: function(value) {
				return EncryptName(value)
			},
		},
		mounted() {
			let _this = this;
			this.timer = setInterval(() => {
				_this.dataTime = new Date();
			}, 1000)
			// 加密用户信息

			this.createsign();
			// 获取核酸接口
			this.qrHScode()


		},
		beforeDestroy() { //生命周期实例销毁之前
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			// 核酸接口
			qrHScode() {
				var formData = new FormData();
				formData.append("idcard", encrypt("370829197201193331")); // ,
				qrHScode(formData).then((res) => {
					if (res.code == 200) {
						if (res.qrcode) {
							this.qrCode = "data:image/png;base64," + res.qrcode;
							this.checkList = res.checkList.slice(0, 1);
						} else {
							this.qrCode = ""
							//没有code
						}
					} else {
						Toast.fail(res.msg);
					}

				}).catch((err) => {
					// Toast.fail('系统异常，请稍后再试');
				})
			},
			// 点击按钮
			clickBtn(item) {
				// 国务院行程卡
				if (item.index == 1) {
					location.href = 'alipays://platformapi/startapp?appId=2021002170600786';
				}
				//溯源e通行
				if (item.index == 2) {
					this.$route.push('#小程序://溯源e通行/Weixin/xnobZj5uQmELyAe')
				} //自助申报
				if (item.index == 3) {
					this.$router.push('/report')
					// console.log('2222', )
					// location.href = window.open('weixin://dl/business/?t= *xnobZj5uQmELyAe*');
					console.log('2222', )
					location.href = 'weixin://dl/business/?t= *TICKET*'
					// this.$route.push('#小程序://溯源e通行/Weixin/xnobZj5uQmELyAe');
					// this.$router.push({
					// 	path: '',
					// });
				}
				if (item.index == 4) {
					this.$router.push('/myself')
				}
				if (item.index == 5) {
					this.$router.push('/youjiang')
				}
				if (item.index == 6) {
					this.$router.push('/daka')
				}
				if (item.index == 8) {
					this.$router.push('/fengkong')
				}
				if (item.index == 10) {
					this.$router.push('/kuaidi')
				}
				// 核酸检测点
				if (item.index == 9) {
					window.open('https://www.jiankangjining.com:8086/ncovMap/');
				}
			},
			// 获取sign
			createsign() {
				var formData = new FormData();
				formData.append("app_id", "jnwyyylbvfd");
				formData.append("interface_id", "jnwyhqxqlb");
				formData.append("version", "1.0");
				formData.append("header", {
					"host": "apizhengwu.wuye.jnszf.cn"
				});
				formData.append("biz_content", {
					keyword: "",
					county_id: "370800"
				});
				formData.append("timestamp", this.$moment().valueOf());
				formData.append("charset", "utf-8");
				formData.append("origin", 1);
				createsign(formData).then((res) => {
					if (res.success) {
						this.sign = res.data.sign;
						this.gateway(this.sign)
					}
				}).catch((err) => {
					// Toast.fail('系统异常，请稍后再试');
				})
			},
			gateway(sign) {
				//健康码通行码出示多码接口
				var formData = new FormData();
				formData.append("app_id", "wxxcxlyshp");
				formData.append("interface_id", "wxxcxtxmcsdm");
				formData.append("version", "1.0");
				formData.append("header", {});
				formData.append("biz_content", JSON.stringify({
					name: "郝雪君",
					cardNo: "230281199311062368"
				}));
				formData.append("timestamp", this.$moment().valueOf());
				formData.append("charset", "utf-8");
				formData.append("origin", 1);
				formData.append("sign", sign);
				gateway(formData).then((res) => {
					if (res.success) {
						console.log('获取信息', res)
					}
				}).catch((err) => {
					Toast.fail('系统异常，请稍后再试');
				})
			},
			// 点击tab
			tab(index) {
				switch (index) {
					//健康出行
					case 1:
						this.num = 1
						break;
					case 2:
						// 疫情地图
						this.num = 2
						break;
					case 3:
						// 核酸码
						this.nums = 1
						break;
					case 4:
						// 健康码
						this.nums = 2
						break;
					default:

				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../assets/scss/home.scss";
</style>
